<template>
  <div>
    <div class="content">
        <div class="content-con-i" v-for="(item,index) in special" :key="index" @click="specialDetails(item.id)">
          <div class="top">
            <img class="img" :src="item.pic" alt="">
          </div>
          <div class="bottom">
            <p class="bottom-top">{{item.title}}</p>
            <p class="bottom-bottom">{{item.descript}}</p>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState({
        special: state => state.homeSwiper.specialList
      })
    },
    mounted() {
      this.$store.dispatch('special')
    },
    methods:{
      specialDetails(id){
        // this.$store.dispatch('specialDetails',id)
        // console.log(id)
        this.$router.push({
          path:'/specialXiang',
          query:{
            id:id
          }
        })
      }
      
    }
  }
</script>

<style lang='scss' scoped>
  .content {
    width: 100%;
    overflow: scroll;
    display: flex;
    height: 5rem;
      .content-con-i {
        width: 80%;
        height: 100%;
        padding: 0.1rem;
        .top{
          width: 100%;
          height: 80%;
          img{
            height: 100%;
            width: 100%;
          }
        }
        .bottom{
          .bottom-top{
            font-size: 0.3rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .bottom-bottom{
            width: 80%;
            color: gray;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.24rem;
          }
        }
      }
  }
</style>